<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>网站导航中心 © 白云万维网工作室承建</title>
    <!-- 引入 Tailwind CSS（确保路径与实际文件一致） -->
    <script src="../zy/webside/st/tailwind.css"></script>
    <!-- 引入 Font Awesome 图标库（用于导航图标展示） -->
    <link href="../zy/webside/nd/css/font-awesome.min.css" rel="stylesheet">
    
    <!-- 完整的 Tailwind 配置 -->
    <script>
        tailwind.config = {
            // 主题扩展：自定义品牌色、字体等（可根据工作室需求调整）
            theme: {
                extend: {
                    colors: {
                        bywwwgzs: {
                            primary: '#2563eb',    // 主色：蓝色（品牌主色调）
                            secondary: '#10b981',  // 辅助色：绿色（按钮/交互）
                            neutral: '#f3f4f6',    // 中性色：浅灰（背景/分隔）
                            dark: '#1f2937',       // 深色：文字/标题
                        },
                    },
                    fontFamily: {
                        sans: ['Inter', 'system-ui', 'sans-serif'], // 无衬线字体（通用）
                    },
                    boxShadow: {
                        'nav': '0 2px 8px rgba(0, 0, 0, 0.08)', // 导航卡片阴影（轻微悬浮感）
                    }
                },
            },
            // 插件配置：默认加载 Tailwind 核心插件，可按需添加第三方插件
            plugins: [
                // 若需使用表单样式/排版优化，可取消注释下方插件（需提前安装）
                // require('@tailwindcss/forms'),
                // require('@tailwindcss/typography'),
            ],
            // 核心插件控制：禁用无需的样式以减小 CSS 体积
            corePlugins: {
                // 示例：若不需要渐变背景，可禁用 gradient
                // gradient: false,
            }
        }
    </script>

    <!-- Tailwind 自定义样式指令：基础样式、组件、工具类 -->
    <style type="text/tailwindcss">
        @layer base {
            /* 基础样式重置：统一页面默认样式 */
            body {
                @apply font-sans text-bywwwgzs-dark bg-gray-50 min-h-screen flex flex-col;
            }
            h1, h2, h3 {
                @apply font-bold;
            }
            a {
                @apply transition-all duration-300; // 所有链接添加过渡效果
            }
        }

        @layer components {
            /* 自定义组件：导航卡片、按钮等可复用样式 */
            .nav-card {
                @apply bg-white rounded-xl shadow-nav p-4 hover:shadow-md hover:-translate-y-1 transition-all duration-300;
            }
            .nav-link {
                @apply flex items-center gap-3 text-left w-full py-2 px-3 rounded-lg hover:bg-bywwwgzs-neutral;
            }
            .disabled-link {
                @apply opacity-50 pointer-events-none cursor-not-allowed; // 禁用链接样式
            }
            .category-tag {
                @apply text-xs px-2 py-0.5 rounded-full bg-bywwwgzs-primary/10 text-bywwwgzs-primary;
            }
        }

        @layer utilities {
            /* 自定义工具类：补充 Tailwind 未覆盖的需求 */
            .text-ellipsis-1 {
                @apply truncate; // 单行文本溢出省略
            }
            .content-auto {
                content-visibility: auto; // 优化滚动性能
            }
        }
    </style>
</head>
<body>
    <!-- 页面头部：标题 + 工作室信息 -->
    <header class="bg-white border-b border-gray-200 sticky top-0 z-10">
        <div class="container mx-auto px-4 py-3 flex flex-col md:flex-row justify-between items-center gap-2">
            <div class="flex items-center gap-2">
                <!-- 若有 logo.png，可取消注释并调整路径 -->
                <!-- <img src="./logo.png" alt="白云万维网工作室logo" class="w-8 h-8"> -->
                <h1 class="text-xl md:text-2xl text-bywwwgzs-primary">网站导航中心</h1>
            </div>
            <p class="text-sm text-gray-500">© 2024 白云万维网工作室 承建</p>
        </div>
    </header>

    <!-- 页面主体：导航分类 + 链接列表 -->
    <main class="flex-1 container mx-auto px-4 py-6 md:py-8">
        <!-- 公告提示（若有公告可展示） -->
        <div class="mb-6 p-4 bg-blue-50 border border-blue-100 rounded-lg flex items-center gap-2">
            <i class="fa fa-bullhorn text-blue-500" aria-hidden="true"></i>
            <a href="./announcements.html" class="text-blue-600 hover:underline">查看最新公告</a>
        </div>

        <!-- 导航内容：按分类分组渲染 -->
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
            <!-- 1. ldby8204 相关导航 -->
            <section class="nav-card">
                <h2 class="text-lg mb-3 text-bywwwgzs-dark flex items-center gap-2">
                    <i class="fa fa-user-circle text-bywwwgzs-primary" aria-hidden="true"></i>
                    ldby8204 相关
                </h2>
                <div id="ldby8204-links" class="space-y-1">
                    <!-- 动态渲染链接（JS 处理） -->
                </div>
            </section>

            <!-- 2. 工作室工具导航 -->
            <section class="nav-card">
                <h2 class="text-lg mb-3 text-bywwwgzs-dark flex items-center gap-2">
                    <i class="fa fa-wrench text-bywwwgzs-secondary" aria-hidden="true"></i>
                    实用工具
                </h2>
                <div id="tools-links" class="space-y-1">
                    <!-- 动态渲染链接（JS 处理） -->
                </div>
            </section>

            <!-- 3. 异常/关闭服务导航 -->
            <section class="nav-card">
                <h2 class="text-lg mb-3 text-bywwwgzs-dark flex items-center gap-2">
                    <i class="fa fa-exclamation-triangle text-amber-500" aria-hidden="true"></i>
                    异常服务
                </h2>
                <div id="disabled-links" class="space-y-1">
                    <!-- 动态渲染链接（JS 处理） -->
                </div>
            </section>
        </div>
    </main>

    <!-- 页面底部：版权 + 附加链接 -->
    <footer class="bg-white border-t border-gray-200 py-4 mt-auto">
        <div class="container mx-auto px-4 text-center text-sm text-gray-500">
            <p class="mb-2">
                联系我们 | <a href="./shutdown.html" class="hover:text-bywwwgzs-primary">异常说明</a> | 
                <a href="./LICENSE.md" class="hover:text-bywwwgzs-primary">许可证</a> | 
                <a href="./README.md" class="hover:text-bywwwgzs-primary">项目说明</a>
            </p>
            <p>本页面基于 Tailwind CSS + Font Awesome 构建 | 禁止未经授权的二次修改</p>
        </div>
    </footer>

    <!-- 动态渲染导航链接的 JS 逻辑 -->
    <script>
        // 1. 原始链接数据（来自原网页，补充格式错误）
        const linkData = [
            { name: "ldby8204的博客1", url: "../other/ldby8204-bk-1/index.html", category: ["ldby8204"] },
            { name: "ldby8204的博客2", url: "../other/ldby8204-bk-2/index.html", category: ["ldby8204"] },
            { name: "lcz-异常，详见公告", url: "./shutdown.html", category: ["lcz", "disabled"] },
            { name: "白云工作室", url: "../other/bygzs/index.html", category: ["白云工作室", "ldby8204"] },
            { name: "YO工作室", url: "../other/yogzs/index.html", category: ["YO工作室", "ldby8204"] },
            { name: "白云万维网工作室", url: "../other/bywwwgzs/index.html", category: ["白云万维网工作室", "ldby8204"] },
            { name: "留言板-因致命异常已关闭", url: "./down.html", category: ["白云万维网工作室", "ldby8204", "disabled"] },
            { name: "在线png转ico工具", url: "../other/pngtoico/convert_to_ico.html", category: ["白云万维网工作室", "lcx", "tools"] },
            { name: "星际战机", url: "../other/starblaze/index.html", category: ["白云万维网工作室", "ldby8204", "tools"] }
        ];

        // 2. 导航容器元素（提前获取，避免重复 DOM 查询）
        const ldby8204Container = document.getElementById('ldby8204-links');
        const toolsContainer = document.getElementById('tools-links');
        const disabledContainer = document.getElementById('disabled-links');

        // 3. 图标映射：根据链接名称匹配对应图标
        const getLinkIcon = (linkName) => {
            if (linkName.includes('博客')) return 'fa-book';
            if (linkName.includes('工作室')) return 'fa-building';
            if (linkName.includes('png转ico')) return 'fa-image';
            if (linkName.includes('星际战机')) return 'fa-gamepad';
            if (linkName.includes('异常') || linkName.includes('关闭')) return 'fa-times-circle';
            return 'fa-link'; // 默认图标
        };

        // 4. 动态渲染链接
        const renderLinks = () => {
            linkData.forEach(link => {
                // 创建链接元素
                const linkElement = document.createElement('a');
                linkElement.href = link.url;
                linkElement.className = 'nav-link';
                linkElement.setAttribute('aria-label', link.name);

                // 若为禁用链接，添加禁用样式
                if (link.category.includes('disabled')) {
                    linkElement.classList.add('disabled-link');
                    linkElement.removeAttribute('href'); // 移除跳转功能
                }

                // 链接内容：图标 + 名称 + 分类标签（仅显示第一个分类）
                const categoryTag = link.category[0] !== 'disabled' ? link.category[0] : link.category[1];
                linkElement.innerHTML = `
                    <i class="fa ${getLinkIcon(link.name)} text-bywwwgzs-primary w-5 text-center" aria-hidden="true"></i>
                    <span class="text-ellipsis-1 flex-1">${link.name}</span>
                    <span class="category-tag">${categoryTag}</span>
                `;

                // 根据分类插入对应容器
                if (link.category.includes('disabled')) {
                    disabledContainer.appendChild(linkElement);
                } else if (link.category.includes('tools')) {
                    toolsContainer.appendChild(linkElement);
                } else if (link.category.includes('ldby8204')) {
                    ldby8204Container.appendChild(linkElement);
                }
            });
        };

        // 5. 页面加载完成后渲染链接
        document.addEventListener('DOMContentLoaded', renderLinks);
    </script>
</body>
</html>